<!DOCTYPE html>
<html>
<head>
	<title>josn练习</title>
	<meta charset="utf-8">
	<style type="text/css">
		.profile{
			width: 400px;
			margin: 0 auto;
			border: 1px solid #ccc;
			min-height: 300px;
		}
	</style>
</head>
<body>
	<div class="profile">
		<p><span>姓名：</span><span id="sname"></span></p>
		<p><span>年龄：</span><span id="sage"></span></p>
		<p><span>朋友：</span><span id="sfriends"></span></p>
	</div>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
	$.get('student.json',function(res){
		console.log(res)
		$('#sname').text(res.name);
		$('#sage').text(res.age);
		var f= '';
		for (var i = 0; i<res.friends.length;i++){
			f +=res.friends[i].name +" ";
		}
		$('#sfriends').text(f);
	})


</script>
</body>
</html>